<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>发布-码匠社区</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="/static/bootstrap-3.3.7/js/jquery.min.js"></script>
    <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <link rel="icon" href="/static/img/favicon.ico" type="image/x-icon"/>
    <link rel="bookmark" href="/static/img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/static/css/majiang.css">
    <link rel="stylesheet" href="/static/editor.md/css/editormd.min.css"/>
    <script src="/static/editor.md/editormd.min.js"></script>
    <style>
        .tag {
            margin-top: 7px;
        }

        .tag span {
            font-size: 14px;
            display: inline-block;
            margin-bottom: 4px;
        }
    </style>
</head>
<body>
<div th:insert="navigation :: nav"></div>
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <h2><span class="glyphicon glyphicon-plus" aria-hidden="true">发布</span></h2>
            <hr class="divider"/>
            <form action="/publish" method="post">
                <div class="form-group">
                    <label for="title">问题标题（简单扼要）：</label>
                    <input type="text" class="form-control" id="title" name="title" placeholder="问题标题..."
                           th:value="${title}"/>
                </div>
                <div class="form-group">
                    <label for="description">问题补充（必填，请参照右侧提示）：</label>
                    <div id="editor">
                        <!--                    <textarea name="description" id="description" class="form-control" cols="30"-->
                        <!--                              placeholder="描述"-->
                        <!--                              th:text="${description}"-->
                        <!--                              rows="10"></textarea>-->
                        <textarea name="description" id="description" style="display: none"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="tag">添加标签：</label>
                    <input type="text" class="form-control" id="tag" name="tag" placeholder='输入标签以","分隔'
                           th:value="${tag}" onclick="showSelectTag()"/>
                    <!--标签选择列表-->
                    <div style="display: none" id="selectTag">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#DL" aria-controls="home" role="tab"
                                                                      data-toggle="tab">开发语言</a></li>
                            <li role="presentation"><a href="#PF" aria-controls="profile" role="tab"
                                                       data-toggle="tab">平台框架</a></li>
                            <li role="presentation"><a href="#server" aria-controls="messages" role="tab"
                                                       data-toggle="tab">服务器</a>
                            </li>
                            <li role="presentation"><a href="#others" aria-controls="settings" role="tab"
                                                       data-toggle="tab">其他</a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content tag">
                            <div role="tabpanel" class="tab-pane active" id="DL">
                                <span class="label label-info btn" onclick="selectTag(this)">javascript</span>
                                <span class="label label-info btn" onclick="selectTag(this)">php</span>
                                <span class="label label-info btn" onclick="selectTag(this)">css</span>
                                <span class="label label-info btn" onclick="selectTag(this)">html</span>
                                <span class="label label-info btn" onclick="selectTag(this)">html5</span>
                                <span class="label label-info btn" onclick="selectTag(this)">java</span>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="PF">
                                <span class="label label-info btn" onclick="selectTag(this)">Spring</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Spring Boot</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Mybatis</span>
                                <span class="label label-info btn" onclick="selectTag(this)">SpringMVC</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Vue.js</span>
                                <span class="label label-info btn" onclick="selectTag(this)">React.js</span>

                                <span class="label label-info btn" onclick="selectTag(this)">Spring</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Spring Boot</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Mybatis</span>
                                <span class="label label-info btn" onclick="selectTag(this)">SpringMVC</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Vue.js</span>
                                <span class="label label-info btn" onclick="selectTag(this)">React.js</span>

                                <span class="label label-info btn" onclick="selectTag(this)">Spring</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Spring Boot</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Mybatis</span>
                                <span class="label label-info btn" onclick="selectTag(this)">SpringMVC</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Vue.js</span>
                                <span class="label label-info btn" onclick="selectTag(this)">React.js</span>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="server">
                                <span class="label label-info btn" onclick="selectTag(this)">Tomcat</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Centos</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Ubuntu</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Deepin</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Debian</span>
                                <span class="label label-info btn" onclick="selectTag(this)">Jetty</span>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="others">
                                <span class="label label-info btn" onclick="selectTag(this)">学习</span>
                                <span class="label label-info btn" onclick="selectTag(this)">闲聊</span>
                                <span class="label label-info btn" onclick="selectTag(this)">求助</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="alert alert-warning alert-dismissible" role="alert" th:if="${error != null}">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <strong>Warning!</strong>
                    <span th:text="${error}"></span>
                </div>
                <input type="hidden" name="id" th:value="${id}"/>
                <button type="submit" class="btn btn-success btn-publish">发布</button>
            </form>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <h3>问题发起指南</h3>
            <ul>
                <li>问题标题：请用精简的语言描述您发布的问题，不超过25字</li>
                <li>问题补充：详细补充您的问题内容，并确保问题描述清晰直观，并提供一些相关的资料</li>
                <li>选择标签：选择一个或者多个合适的标签，用逗号隔开，每个标签不超过10个字</li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    function showSelectTag() {
        $("#selectTag").css('display', 'block');
    }


    function selectTag(node) {
        let text = $(node).text();
        let $tag = $("#tag");
        let tag = $tag.val();
        if (tag) {
            $tag.val(tag + "," + text);
        } else {
            $tag.val(text);
        }
    }

    $(function () {
        var editor = editormd("editor", {
            placeholder: "请输入问题内容",
            // 流程图
            flowChart: true,
            // 时序图
            sequenceDiagram: true,
            syncScrolling: "single",
            // html
            htmlDecode: true, // Decode all html tags & attributes
            atLink: false,    // disable @link
            emailLink: false,    // disable email address auto link
            height: "400px",
            // 表情
            emoji: true,
            // markdown: "xxxx",     // dynamic set Markdown text
            path: "/static/editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
</script>
<div th:insert="footer :: foot"></div>
</body>
</html>